<template>
  <div>
    <ItemHeader :menuArr="categoryArr" @navFn="selectThis"/>
    <div>
      <template  v-for="(item, index) in dataListArr">
        <div v-if="index==0"
          :key="item.key"
          v-show="index===currentCategoryIndex">
          <OrderItem :list="item.list" @delFn="deleteOrder"/>
          <button v-if="dataListArr[currentCategoryIndex].total > dataListArr[currentCategoryIndex].list.length"
              class="load-more-btns small-one ftz16"
              @click="loadMore">
              <template v-if="dataListArr[currentCategoryIndex].isLoadingMore">
                <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
                <span>正在加载，请稍候......</span>
              </template>
              <span v-else>点击加载更多...</span>
            </button>
        </div>
        <div v-else
          :key="item.key"
          v-show="index===currentCategoryIndex">
          <ContractItem :list="item.list"/>
          <button v-if="dataListArr[currentCategoryIndex].total > dataListArr[currentCategoryIndex].list.length"
              class="load-more-btns small-one ftz16"
              @click="loadMore">
              <template v-if="dataListArr[currentCategoryIndex].isLoadingMore">
                <i class='layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop ftz20'></i>
                <span>正在加载，请稍候......</span>
              </template>
              <span v-else>点击加载更多...</span>
            </button>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import ItemHeader from '@/components/dashboardAuth/item-header'
import OrderItem from '@/components/dashboardAuth/order-item'
import ContractItem from '@/components/dashboardAuth/contract-item'
import {
  myAllSubscribePlan
} from '@/service/api'
export default {
  components: {
    ItemHeader,
    OrderItem,
    ContractItem
  },
  data () {
    return {
      currentCategoryIndex: 0,
      // categoryArr: ['我的订单', '我的合同'],
      categoryArr: [{name: '我的订单', route: '/dashboardAuth/order'}, {name: '我的合同', route: '/dashboardAuth/order'}],
      dataListArr: [],
      searchDataArr: []
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (window.layer) {
        this.showLoadingModal()
      }
      this.initDataListArr()
      this.initData()
    })
  },
  methods: {
    showLoadingModal () {
      this.layerLoad = window.layer.load(0, {
        shade: false
      })
    },
    closeLoadingModal () {
      if (window.layer) {
        window.layer.close(this.layerLoad)
      }
    },
    initData () {
      this.getPlanList().then((res) => {
        if (res.status === 200) {
          this.dataListArr[this.currentCategoryIndex].list = res.data.data.list
          this.dataListArr[this.currentCategoryIndex].total = res.data.data.total
          this.dataListArr[this.currentCategoryIndex].loaded = true // 数据已经请求过
          this.closeLoadingModal()
        }
      })
    },
    /**
     * 初始化查询条件和结果容器。方便标签切换
     */
    initDataListArr () {
      for (let i = 0; i < this.categoryArr.length; i++) {
        let searchObj = {
          pageSize: 6,
          pageNum: 1
        }
        this.searchDataArr.push(searchObj)
        this.dataListArr.push({
          key: i,
          total: 0,
          list: [],
          isLoadingMore: false,
          loaded: false
        })
      }
    },
    selectThis (index) {
      this.currentCategoryIndex = index
      if (!this.dataListArr[this.currentCategoryIndex].loaded) {
        this.showLoadingModal()
        this.initData()
      }
    },
    // 计划列表
    async getPlanList () {
      let list = await myAllSubscribePlan(this.searchDataArr[this.currentCategoryIndex])
      return list
    },
    loadMore () {
      let index = this.currentCategoryIndex
      this.dataListArr[index].isLoadingMore = true
      this.searchDataArr[index].pageNum++
      this.getPlanList().then((res) => {
        this.dataListArr[index].isLoadingMore = false
        if (res.status === 200) {
          this.dataListArr[this.currentCategoryIndex].list.push(...res.data.data.list)
        } else {
          this.searchDataArr[index].pageNum.pageNum--
        }
      })
    },
    // 删除订单。子组件调用
    deleteOrder (index) {
      this.dataListArr[0].list.splice(index, 1)
    }
  }
}
</script>

<style scoped>

</style>
